<template>
  <div class="ai-marketplace-container pageBg">
    <h1 class="page-title">AI应用广场</h1>
    
    <div class="card-grid">
      <!-- 弱密码应用 -->
      <div class="app-card">
        <div class="card-icon">
            <img src="@/static/钥匙.png" alt="弱密码应用" />
            </div>
        <div class="card-content">
          <h2 class="card-title">弱密码应用</h2>
          <p class="card-description">
            检测并评估密码安全性，识别常见的弱密码模式。
            提供密码强度分析和安全建议，增强系统安全性。
          </p>
          <button class="card-button" @click="navigateToApp('weak-password')">立即使用</button>
        </div>
      </div>
      
      <!-- BI分析应用 -->
      <div class="app-card">
        <div class="card-icon">
            <img src="@/static/仪表盘.png" alt="BI分析应用" />
        </div>
        <div class="card-content">
          <h2 class="card-title">BI分析应用</h2>
          <p class="card-description">
            基于AI的商业智能分析工具，可视化数据展示和深度洞察。
            支持多维度数据分析，帮助企业做出数据驱动的决策。
          </p>
          <button class="card-button" @click="navigateToApp('bi-analysis')">立即使用</button>
        </div>
      </div>

      <!-- 文章脱敏应用 -->
      <div class="app-card">
        <div class="card-icon">
          <img src="@/static/书签.png" alt="文章脱敏应用" />
        </div>
        <div class="card-content">
          <h2 class="card-title">文章脱敏应用</h2>
          <p class="card-description">
            自动识别并处理文章中的敏感信息，保护个人隐私和机密数据。
            通过AI智能识别技术，高效处理大量文本内容。
          </p>
          <button class="card-button" @click="navigateToApp('article-desensitization')">立即使用</button>
        </div>
      </div>
      
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { login } from "@/api/apis";
import { useRouter } from 'vue-router';

// 获取路由实例
const router = useRouter();

// 导航到应用页面的函数
const navigateToApp = (appPath) => {
  // 根据应用类型跳转到不同的页面
  switch(appPath) {
    case 'article-desensitization':
      router.push('/pages/doc/index');
      break;
    case 'weak-password':
      router.push('/pages/password/index');
      break;
    case 'bi-analysis':
      router.push('/pages/BI/index');
      break;
    default:
      console.error('未知的应用路径:', appPath);
  }
};

// 在页面加载时引入图标库
onMounted(async () => {
  // 添加iconfont图标库
  const iconFont = document.createElement('link');
  iconFont.rel = 'stylesheet';
  iconFont.href = '//at.alicdn.com/t/font_3114978_qe0b39no76.css';
  document.head.appendChild(iconFont);

  const hash = window.location.hash;
  const urlParams = new URLSearchParams(hash.split('?')[1]);
  const code = urlParams.get("code");
  console.log("获取到的 code:", code);

  if (code) {
    console.log("code:", code);
    const response = await login({ code });
    if (response.code === 200) {
      const { token } = response.data;
      uni.setStorageSync("token", token);
    } else {
      console.error("登录失败:", response.message);
    }
  }
});
</script>

<style scoped>
.ai-marketplace-container {
  margin: 0 auto;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.page-title {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 2rem;
  color: #333;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  width: 100%;
}

.app-card {
  display: flex;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
}

.app-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.card-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 120px;
  background: linear-gradient(135deg, #f0f5ff 0%, #e4ecff 100%);
  transition: all 0.3s ease;
}

.card-icon img {
  width: 180rpx;
  height: 180rpx;
  object-fit: cover;
}

.app-card:hover .card-icon {
  background: linear-gradient(135deg, #e4ecff 0%, #d0e0ff 100%);
}

.card-content {
  flex: 1;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}

.card-title {
  margin-top: 0;
  margin-bottom: 0.75rem;
  font-size: 1.5rem;
  color: #333;
}

.card-description {
  color: #666;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  flex-grow: 1;
}

.card-button {
  background-color: #1890ff;
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.2s ease;
  align-self: flex-start;
}

.card-button:hover {
  background-color: #096dd9;
}

@media (max-width: 768px) {
  .card-grid {
    grid-template-columns: 1fr;
  }
  
  .app-card {
    max-width: 100%;
  }
}
</style>
